<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box">
    <CommonDateSearch ref="searchRef" @search="handleSearch"></CommonDateSearch>
    <div class="content-box">
      <div class="chart-box" v-for="item in typeList" :key="item.dictCode">
        <Line
          class="chart"
          :loading="item.loading"
          :chartData="item.chartData"
          :title="item.itemName"
      /></div>
    </div>
  </PageWrapper>
</template>

<script setup>
  import Line from '@/components/Charts/Line/index.vue'
  import { ref, onMounted, reactive } from 'vue'
  import { PageWrapper } from '@/components/Page'
  import { getChartListData } from '@/api/common/chart'
  import { getDictListByCode } from '@/api/sys/dict'
  import CommonDateSearch from '@/components/CommonDateSearch/index.vue'

  defineOptions({ name: 'ExhaustSystem' })

  const searchRef = ref()
  const searchInfo = reactive({})
  const typeList = ref([])
  const chartList = ref([])
  const dictCode = 'exhaust_system'

  onMounted(async () => {
    await getTypeList()
    searchRef.value?.handleSearch()
  })
  const handleSearch = (params) => {
    Object.assign(searchInfo, params)
    getChartData()
  }
  const getTypeList = async () => {
    const res = await getDictListByCode(dictCode)
    typeList.value = res.map((item) => ({
      ...item,
      loading: true,
      chartData: {
        xaxisList: [],
        yaxisList: [],
      },
    }))
  }
  const getChartData = () => {
    typeList.value.forEach((item) => {
      item.loading = true
      getChartListData({
        ...searchInfo,
        dictCode,
        itemNames: item.itemName,
      })
        .then((res) => {
          item.chartData = res
        })
        .finally(() => {
          item.loading = false
        })
    })
  }
</script>

<style scoped lang="scss">
  .content-box {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    padding: 4px;
    overflow: auto;
    background: #fff;

    .chart-box {
      flex-shrink: 0;
      width: calc(100% / 3);
      height: 30%;
      min-height: 240px;
      padding: 4px;
    }
  }
</style>
